<script setup>
  const { proxy } = getCurrentInstance();
  import {
    GetEnvironmentalAPI,
    GetSafetyInspectionlAPI,
    GetSafetyAuditlAPI,
    GetShopAPI,
    GetAnHuanAPI,
  } from "@/api/shopInspection/analysis";
  import supplierEcharts from "./supplierEcharts.vue";

  import { environmentalOpt, barOpt } from "./echarts.js";
  import Echarts from "./echarts.vue";

  /**
   * 查询表单
   */
  const query = reactive({
    beginTime: "",
    endTime: "",
    deptId: "",
    year: "",
    month: "",
  });

  const environmental = ref({});
  /*环保稽查 */

  const getEnvironmental = async () => {
    try {
      console.log(query, "query");
      const { data: result } = await GetEnvironmentalAPI(query);
      environmental.value = environmentalOpt("车间自查环保稽查类别", result);
    } catch { }
  };

  const safetyInspectionl = ref({});
  /*安全检查 */
  const getSafetyInspectionl = async () => {
    try {
      const { data: result } = await GetSafetyInspectionlAPI(query);
      safetyInspectionl.value = environmentalOpt("车间自查安全检查类别", result);
    } catch { }
  };

  /**安环稽查 */
  const safetyAuditl = ref({});
  const getSafetyAuditl = async () => {
    try {
      const { data: result } = await GetSafetyAuditlAPI(query);
      safetyAuditl.value = environmentalOpt("安环稽查统计", result);
    } catch { }
  };

  /**
   * 车间自查
   */
  const shop = ref({});
  const getShop = async () => {
    try {
      const { data: result } = await GetShopAPI(query);
      console.log(result, "result");

      shop.value = result;
    } catch { }
  };

  //安环
  const anHuan = ref({});
  const getAnHuan = async () => {
    try {
      const { data: result } = await GetAnHuanAPI(query);
      console.log(result, "result");

      anHuan.value = result;
    } catch { }
  };

  /**
   * 模糊查询枚举
   */
  const selectList = ref([
    { type: "时间选择", label: "日期" },
    {
      type: "年月选择",
      label: "年份",
      model: "year",
      timeType: "year",
      format: "YYYY",
    },
    {
      type: "年月选择",
      label: "月份",
      model: "month",
      timeType: "month",
      format: "YYYY-MM",
    },

    {
      label: "部门",
      model: "deptId",
      type: "部门",
    },
  ]);

  const init = () => {
    getEnvironmental();
    getSafetyInspectionl();
    getSafetyAuditl();
    getShop();
    getAnHuan();
  };
  init();
  /**
   * 模糊查询
   */
  const selectSubmit = (val) => {
    console.log(val, "year");
    Object.keys(query).forEach((keyItem) => (query[keyItem] = val[keyItem]));
    init();
  };
</script>

<template>
  <div class="app-container">
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />

    <div class="chart">
      <div class="chart-top">
        <!-- 环保稽查 -->
        <div class="chart-top-chart">
          <Echarts :option="environmental" height="100%" :loading="true" />
        </div>
        <!-- 安全稽查 -->
        <div class="chart-top-chart">
          <Echarts :option="safetyInspectionl" height="100%" :loading="true" />
        </div>
        <!-- 安环稽查 -->
        <div class="chart-top-chart">
          <Echarts :option="safetyAuditl" height="100%" :loading="true" />
        </div>
      </div>
      <div class="chart-bom">
        <!-- 车间自查 -->
        <div class="chart-bom-chart">
          <supplierEcharts style="width: 100%; height: 100%" :xAxisData="shop.abscissa" :yAxisData="shop.ordinate"
            :title="'车间自查'">
          </supplierEcharts>
        </div>
        <!-- 安环 -->
        <div class="chart-bom-chart">
          <supplierEcharts style="width: 100%; height: 100%" :xAxisData="anHuan.abscissa" :yAxisData="anHuan.ordinate"
            :title="'安环稽查'">
          </supplierEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .app-container {
    min-height: calc(100vh - 5.25rem);
    display: flex;
    flex-direction: column;

    .chart {
      flex: 1;
      width: 100%;

      display: flex;
      flex-direction: column;

      .chart-top {
        width: 100%;
        flex: 1;

        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;

        .chart-top-chart {
          width: 33%;
          height: 350px;
          border: 1px solid rgb(177, 177, 177);
        }
      }

      .chart-bom {
        width: 100%;
        display: flex;

        justify-content: space-between;

        .chart-bom-chart {
          width: 49%;

          border: 1px solid rgb(177, 177, 177);
          height: 350px;
        }
      }
    }
  }
</style>